<template>
  <div class="query-type">
    <ul>
      <li
        v-for="(item,index) in typeContent"
        :key="index"
        :class="{'active':num == (index)}"
        class="clearfix queryType"
        @click="typeQueryData(index)">
        <p class="fl">{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    typeContent: {
      type: Array,
      default: function () {
        return []
      }
    }

  },
  data () {
    return {
      num: 0
    }
  },
  mounted () {
    document.getElementsByClassName('queryType')[0].click()
  },
  methods: {
    typeQueryData (index) {
      this.num = index
      this.$emit('typeQuery', index)
    },
    changeNum (num) {
      this.num = num
    }
  }
}

</script>
<style lang="scss">
.query-type {
  height: 0.6rem;
  line-height: 0.7rem;
  width:100%;
  ul {
    width:100%;
    li {
      width: 30%;
      height: 0.6rem;
      line-height: 0.7rem;
      text-align: center;
      font-size: 0.24rem;
      border-radius: 0.05rem;
      border: none;
      float: left;
      margin-right: 2%;
      p:nth-child(1){
          background: #AEAEAE;
          color: #081e4b;
          width: 100%;
            height: 0.6rem;
            line-height: 0.7rem;
            text-align: center;
            font-size: 0.24rem;
            border-radius: 0.05rem;
            border: none;
      }
      &.active{
          p:nth-child(1){
              background: #138CEF;
              color:#ffffff;
          }
      }
    }
    li:nth-child(1){
        margin-right: 4%;
    }
    li:nth-child(2){
        margin-right: 4%;
    }
  }
}

</style>
